<div class="content-section introduction">
    <div class="feature-intro">
        <h1>ProgressBar</h1>
        <p>ProgressBar is a process status indicator.</p>
    </div>
</div>

<div class="content-section implementation">
    <p-toast></p-toast>

    <div class="card">
        <h5>Dynamic</h5>
        <p-progressBar [value]="value"></p-progressBar>
    
        <h5>Static</h5>
        <p-progressBar [value]="50"></p-progressBar>
    
        <h5>Indeterminate</h5>
        <p-progressBar mode="indeterminate" [style]="{'height': '6px'}"></p-progressBar>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;ProgressBarModule&#125; from 'primeng/progressbar';
</app-code>

            <h5>Getting Started</h5>
            <p>ProgressBar has two modes; "determinate" and "indeterminate". Former requires a value between 0 and 100 to display the progress.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-progressBar [value]="value"&gt;&lt;/p-progressBar&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class ModelComponent &#123;

    value: number = 0;

&#125;
</app-code>

            <p>Indeterminate has no such a requirement and is simple enabled using <i>mode</i> property.</p>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-progressBar mode="indeterminate"&gt;&lt;/p-progressBar&gt;
</app-code>

            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>value</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Current value of the progress.</td>
                        </tr>
                        <tr>
                            <td>showValue</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Show or hide progress bar value.</td>
                        </tr>
                        <tr>
                            <td>unit</td>
                            <td>string</td>
                            <td>%</td>
                            <td>Unit sign appended to the value.</td>
                        </tr>
                        <tr>
                            <td>mode</td>
                            <td>string</td>
                            <td>determinate</td>
                            <td>Defines the mode of the progress, valid values are "determinate" and "indeterminate".</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-progressbar</td>
                            <td>Container element.</td>
                        </tr>
                        <tr>
                            <td>p-progressbar-determinate</td>
                            <td>Container element of a determinate progressbar.</td>
                        </tr>
                        <tr>
                            <td>p-progressbar-indeterminate</td>
                            <td>Container element of an indeterminate progressbar.</td>
                        </tr>
                        <tr>
                            <td>p-progressbar-value</td>
                            <td>Element whose width changes according to value.</td>
                        </tr>
                        <tr>
                            <td>p-progressbar-label</td>
                            <td>Label element that displays the current value.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/progressbar" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-progressbar-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-toast&gt;&lt;/p-toast&gt;

&lt;div class="card"&gt;
    &lt;h5&gt;Dynamic&lt;/h5&gt;
    &lt;p-progressBar [value]="value"&gt;&lt;/p-progressBar&gt;

    &lt;h5&gt;Static&lt;/h5&gt;
    &lt;p-progressBar [value]="50"&gt;&lt;/p-progressBar&gt;

    &lt;h5&gt;Indeterminate&lt;/h5&gt;
    &lt;p-progressBar mode="indeterminate" [style]="&#123;'height': '6px'&#125;"&gt;&lt;/p-progressBar&gt;
&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class ProgressBarDemo &#123;

    value: number = 0;

    constructor(private messageService: MessageService) &#123;&#125;

    ngOnInit() &#123;
        let interval = setInterval(() => &#123;
            this.value = this.value + Math.floor(Math.random() * 10) + 1;
            if (this.value >= 100) &#123;
                this.value = 100;
                this.messageService.add(&#123;severity: 'info', summary: 'Success', detail: 'Process Completed'&#125;);
                clearInterval(interval);
            &#125;
        &#125;, 2000);
    &#125;

&#125;
</app-code>

        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-progressbar-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
